import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import moment from 'dayjs';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';
import noticeMsg from '@/assets/image/notice/noticeMsg.png';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      selectDistance: Taro.getStorageSync('selectDistance') || {},
    };
  }

  componentDidMount() { }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  _onScrollToLower = () => {
    let { selectDistance } = this.state;
    let {
      main: { pageNum, totalPages },
      actions: { action },
    } = this.props;
    let num = pageNum + 1;
    if (pageNum == totalPages) return;
    let params = {
      pageNum: num,
      communityCode: selectDistance.code,
    };
    this.props.actions.action.commonChange('main.pageNum', num);
    this.props.actions.action.getProperty(params);
  };
  _onRefresherRefresh = () => {
    let { refresherTriggered, selectDistance } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    let params = {
      pageNum: 1,
      communityCode: selectDistance.code,
    };
    this.props.actions.action.commonChange('main.pageNum', 1);
    this.props.actions.action.getProperty(params);
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  renderList(noticeList) {
    let listView = [];
    noticeList.map((item, index) => {
      let imgfirst = '';
      if (item.refImage.length > 0) {
        imgfirst = item.refImage[0].imageUrl;
      }
      listView.push(
        <View
          key={item.id}
          onClick={() => {
            Taro.navigateTo({
              url: '/pages/package-A/notice/detail/index?op=' + JSON.stringify(item),
            });
          }}
        >
          <Text className="text2">{moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')}</Text>
          <View className="list">
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Image
                style={{
                  width: '35rpx',
                  height: '30rpx',
                  marginRight: '15rpx',
                }}
                src={noticeMsg}
              />
              <Text className="text1" style={{ flex: 1 }}>
                {item.title}
              </Text>
            </View>
            <Text className="text3">{item.details}</Text>
          </View>
        </View>,
      );
    });
    return listView;
  }
  render() {
    let { refresherTriggered } = this.state;
    let {
      main: { propertyNoticeList, pageNum, totalPages, isLoading },
      actions: { action },
    } = this.props;
    return (
      <View className="noticeMain">
        <ScrollView
          scrollY
          className="noticeMain-scroll"
          style={{ flex: 1 }}
          onScrollToLower={this._onScrollToLower}
          refresherEnabled
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}
        >
          {propertyNoticeList && propertyNoticeList.length > 0 ? (
            this.renderList(propertyNoticeList)
          ) : (
            <Blank
              content="没有社区公告信息哦~"
              img={notdataImg}
              imgStyle={{ width: '400rpx', height: '400rpx' }}
              textStyle={{
                fontSize: '32rpx',
                color: '#999999',
                textAlign: 'center',
                marginTop: '40rpx',
              }}
            />
          )}
          {propertyNoticeList.length != 0 && pageNum != totalPages && <View className="status">加载中</View>}
          {!isLoading && propertyNoticeList.length != 0 && pageNum == totalPages && (
            <View className="status">已经到底了~</View>
          )}
        </ScrollView>
      </View>
    );
  }
}
